<template>
  <div class="dashboard-container">
    <div>
      <el-row>
        <el-col>
          <el-button type="primary" @click="handleNewtask">新建算法</el-button>
          <el-input v-model="input" placeholder="请输入内容" class="search"><el-button slot="append" icon="el-icon-search"></el-button></el-input>
        </el-col>
      </el-row>
    </div>

      <div>
            <el-row :gutter="20">
            <el-col :span="5" v-for="content in list" >
              <div class="newTaskList">
                  <div class="content" style="margin-top:20px;padding-left:5px;">
                        <div class="container-list">
                          <el-row>
                            <el-col :span="16">
                              <div style="color:rgb(149,159,221);padding-top:20px;padding-left:38px;width:80%;word-wrap:break-word;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{content.SdkDescribe}}</div>
                            </el-col>
                            <el-col :span="8">
                              <i class="el-icon-delete" @click="deleteBtn()" style="color:rgb(149,159,221);display:inline-block;margin-left:30px;margin-top:17px;"></i>
                            </el-col>
                          </el-row>
                          <ul style="margin-top:10px;">
                              <li>需求类型:{{content.type}}</li>
                              <li>需求方:{{content.SdkId}}</li>
                              <li>接口人:{{content.Operator}}</li>
                              <li>
                                    状态：<el-button size="small" style="color:rgb(212,250,183)">已评测{{content.Status}}</el-button>
                              </li>
                              <li>创建时间:{{content.CreateTime}}</li>
                          </ul>
                          <el-button type="primary" style="width:280px;height:50px;margin-top:30px;border:rgb(149,159,221);background-color:rgb(149,159,221);display:inline-block;margin-bottom:0" @click="handleDetail(content)">查看详情</el-button>
                        </div>
                  </div>
                </div>                 
              </el-col>    
            </el-row>
        </div>

            <div class="pagenations" style="margin-left:750px;margin-top:20px;">
                <!-- <el-row>
                  <pagination v-show="total>0" :total="total" :page.sync="selectPages.Page" :limit.sync="selectPages.Size" style="text-align:right;" @pagination="getList"  />
              </el-row> -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                @pagination="getList"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="100">
              </el-pagination>
            </div>

    <el-dialog title="新建算法" :visible.sync="dialogNewtask" width="90%">
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin: 0 auto"
      >
        <div v-if="temp.RequestType===0 || temp.RequestType===1 || temp.RequestType===2">
          <div style="margin-left:-200px;">
            <el-form-item label="算法名称">
              <el-input v-model="temp.Name" />
            </el-form-item>
            <el-form-item label="需求方">
              <el-input v-model="temp.Describe" />
            </el-form-item>
            <el-form-item label="接口人">
              <el-input v-model="temp.Operator" />
            </el-form-item>
          </div>
          <div style="float:right;width:2px;height:150px; border-radius:1px;background:gray;margin-right:160px;margin-top:-190px;"></div> 

          <div cass="right-container" style="margin-right:-200px;margin-top:-200px;float:right">
            <el-form-item label="报告类型">
                <el-radio-group v-model="temp.ReportType">
                  <el-radio :label="0">通用标签</el-radio>
                  <el-radio :label="1">分类识别</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="版本输入类型">
                <el-radio-group v-model="temp.InputType">
                  <el-radio :label="0">图片</el-radio>
                  <el-radio :label="1">视频</el-radio>
                  <el-radio :label="2">文本</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="版本输出类型">
                <el-radio-group v-model="temp.OutputType">
                  <el-radio :label="0">图片</el-radio>
                  <el-radio :label="1">视频</el-radio>
                  <el-radio :label="2">文本</el-radio>
                </el-radio-group>
              </el-form-item>
          </div> 
        </div>
          <div class="label-list" style="margin-left:-200px;">
           <el-form-item label="请求类型">
              <el-radio-group v-model="temp.RequestType">
                <el-radio :label="0">镜像</el-radio>
                <el-radio :label="1">服务</el-radio>
                <el-radio :label="2">SDK</el-radio>
              </el-radio-group>
            </el-form-item> 
        </div>

        <!-- 当选中镜像时 -->

        <div class="Mirror" style="margin-left:-200px;">
           <div v-if="temp.RequestType===0">
            <el-form-item label="请求URL">
              <el-input v-model="temp.RequestUrl" />
            </el-form-item>
            <el-form-item label="请求报文">
              <el-input v-model="temp.RequestBody" />
            </el-form-item>
            <el-form-item label="返回报文">
              <el-input v-model="temp.ResponseBody" />
            </el-form-item>
            <el-form-item label="结果字段">
              <el-input v-model="temp.ResultKey" />
            </el-form-item>

            <el-form-item v-if="temp.RequestType===0" label="镜像地址">
              <el-input v-model="temp.MirrorUrl" />
            </el-form-item>
             <el-form-item label="请求方式">
                <el-select v-model="temp.Method" placeholder="请求方式" style="width:300px;">
                  <el-option  :label="0" value="同步"></el-option>
                  <el-option  :label="1" value="异步"></el-option>
                </el-select>
              </el-form-item>
          </div>
        </div>

        <!-- 当选中服务时 -->

        <div class="service" style="margin-left:-200px;">
            <div v-if="temp.RequestType===1">
            <el-form-item label="请求URL">
              <el-input v-model="temp.RequestUrl" />
            </el-form-item>
            <el-form-item label="请求报文">
              <el-input v-model="temp.RequestBody" />
            </el-form-item>
           <!--  <el-form-item label="返回报文">
              <el-input v-model="temp.ResponseBody" />
            </el-form-item> -->
            <el-form-item label="结果字段">
              <el-input v-model="temp.ResultKey" />
            </el-form-item>

           <!--  <el-form-item v-if="temp.RequestType===0" label="镜像地址">
              <el-input v-model="temp.MirrorUrl" />
            </el-form-item> -->
             <el-form-item label="请求方式">
                <el-select v-model="temp.Method" placeholder="请求方式" style="width:300px;">
                  <el-option  :label="0" value="同步"></el-option>
                  <el-option  :label="1" value="异步"></el-option>
                </el-select>
              </el-form-item>
          </div>
        </div>

        <!-- 当选中sdk时 -->
        <div style="margin-left:-200px;">
          <div v-if="temp.RequestType===2 && temp.RequestType===seen">
            <el-form-item label="请求URL">
              <el-input v-model="temp.RequestUrl" />
            </el-form-item>
            <el-form-item label="请求报文">
              <el-input v-model="temp.RequestBody" />
            </el-form-item>
            <el-form-item label="返回报文">
              <el-input v-model="temp.ResponseBody" />
            </el-form-item>
            <el-form-item label="结果字段">
              <el-input v-model="temp.ResultKey" />
            </el-form-item>

            <el-form-item v-if="temp.RequestType===0" label="镜像地址">
              <el-input v-model="temp.MirrorUrl" />
            </el-form-item>
             <el-form-item label="请求方式">
                <el-select v-model="temp.Method" placeholder="请求方式" style="width:300px;">
                  <el-option  :label="0" value="同步"></el-option>
                  <el-option  :label="1" value="异步"></el-option>
                </el-select>
              </el-form-item>
          </div>
        </div>
      
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNewtask = false">取消</el-button>
        <el-button type="primary" @click="createData()">新建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchSdkList, CreateSdkList } from '@/api/video'
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'

export default {
  components:{
    Pagination
  },
  name: 'Dashboard',
  
  filters: {
    statusFilter(status) {
      const statusMap = {
        '0': 'success',
        '-1': 'danger'
      }
      return statusMap[status]
    },
    statusIconFilter(status) {
      const statusMap = {
        '0': 'el-icon-check',
        '-1': 'el-icon-close'
      }
      return statusMap[status]
    },
    statusTextFilter(status) {
      const statusMap = {
        '0': '可用',
        '-1': '停用'
      }
      return statusMap[status]
    },
    categoryTypeFilter(status) {
      const statusMap = {
        '-1': '无',
        '1': '低俗审核',
        '2': '内容理解',
        '3': '智能识别',
        '5': '优质挖掘'
      }
      return statusMap[status]
    }
  },
  components: { Pagination },
  data() {
    return {
      dialogNewtask: false,
      input: '',
      list: null,
      total: 0,
      listLoading: false,
      temp: {
        Name: '', // 算法名字
        Describe: '', // 需求方
        Operator: '', // 接口人
        RequestUrl: '', // 请求url
        RequestBody: '', // 请求报文
        ResponseBody: '', // 返回报文
        ResultKey: '', // 结果字段
        RequestType: 0, // 请求类型（0：镜像 1：服务 2：SDK）
        MirrorUrl: '', // 镜像地址（只有请求是镜像时候需要）
        Method: 0, // 请求方式（0：同步，1：异步）
        ReportType: 0, // 报告类型 0:通用标签 1:分类识别
        InputType: 0, // 版本输入类型（0：图片 1：视频 2：文本）
        OutputType: 0,// 版本输出类型（0：图片 1：视频 2：文本）
        seen:false
      },
      title:{
        firstPage:"视频GIF提取"
      },
      selectPages: {
        Page: 1,
        Size: 10,
        SdkId: -1
      },
    }
  },
  computed: {
    ...mapGetters([
      'ProjectId'
    ]),
    watchProjectId() {
      return this.$store.state.constants.ProjectId
    }
  },
  watch: {
    watchProjectId(curVal, oldVal) {
      this.getList()
    }
  },
  created() {
    const query = this.$route.query
    if (query && query.id) {
      this.getList(query.id)
    } else {
      this.getList()
    }
  },
  methods: {
    getList(id) {
      if (!this.ProjectId) return
      this.listLoading = true
      const params = {
        ProjectId: id || this.ProjectId
      }
      fetchSdkList(params).then(response => {
        this.list = response.Data
        this.total = response.Data.length

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      }).catch(() => {
        this.listLoading = false
      })
    },
    handleNewtask() {
      this.dialogNewtask = true
      this.isCreate = true
      this.temp = {
        Name: '', // 算法名字
        Describe: '', // 需求方
        Operator: '', // 接口人
        RequestUrl: '', // 请求url
        RequestBody: '', // 请求报文
        ResponseBody: '', // 返回报文
        ResultKey: '', // 结果字段
        RequestType: 0, // 请求类型（0：镜像 1：服务 2：SDK）
        MirrorUrl: '', // 镜像地址（只有请求是镜像时候需要）
        Method: '同步', // 请求方式（0：同步，1：异步）
        ReportType: 0, // 报告类型（0:通用标签 1:分类识别）
        InputType: 0, // 版本输入类型（0：图片 1：视频 2：文本）
        OutputType: 0 // 版本输出类型（0：图片 1：视频 2：文本）
      }
    },
    handleDetail(row) {
      const param = {
        SdkName: row.SdkName,
        CreateTime: row.CreateTime,
        SdkDescribe: row.SdkDescribe,
        Operator: row.Operator,
        Status: row.Status,
        SdkId: row.SdkId
      }
      sessionStorage.setItem('SET_DETAIL', JSON.stringify(param))
      this.$router.push({ path: '/dashboard/Detail', query: {}})
    },
    createData() {
      const params = {
        ...this.temp,
        ProjectId: Number(this.ProjectId)
      }
      CreateSdkList(params).then(response => {
        this.dialogNewtask = false
        this.getList()
      })
    },
    //查看详情中删除
    deleteBtn(){
      this.$confirm(
      '确定删除原子吗？',{
          confirmButtonText: '确定',
          cancleButtonText: '取消',
        }).then(()=>{
          this.$alert("确认删除",
          {
            iconClass:"el-icon-success",
            center:true
          })
        }).catch(()=>{
          this.$alert("已取消删除")
        })
    },    
    //底部分页
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    width:1350px;
    margin: 30px;
    background-color:rgb(242,242,242);
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.search {
  width: 30%;
  float: right;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;

}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.content{
  margin-top:20px;
  width:100%;
  height:100%;
  margin-left:10px;
}

.container-list{
  width:280px;
  height:410px;
  background-color:rgb(255,255,255);
  margin-left:5px;
  margin-bottom:0;
  margin-top:40px;
  border-radius:2px;
}

ul li{
  list-style:none;
  color:rgb(149,159,221);
  padding-top:30px;
}
.footer-pages{
  margin-left:550px;
}
.button.el-button el-button--info{
 width:15px;
 height:15px;
}
.newTaskList{
  background-color:rgb(242,242,242);
  width:1000px;
  margin-top:10px;
}
.el-col el-col-5{
  height:410px;
}
.el-input{
  width:300px;
}

</style>
